<template>
<div class="card telemetry">
  <div class="custom-scrollbar" :style="{ maxHeight: autoHeight }">
    <el-tree
      ref="treeRef"
      class="tel-tree"
      style="max-width: 600px"
      :data="treeData"
      show-checkbox
      :default-expand-all="false"
      node-key="name"
      highlight-current
      :props="defaultProps"
    >
      <template #default="{ node, data }">
        <span>{{ data.label }} {{ data.description }}</span>
      </template>
    </el-tree>

  </div>
    <div class="buttons">
      <el-button class="pry-btn" @click="handleWatch()">遥测观察</el-button>
    </div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElTree } from 'element-plus'
import { fetchTmList } from '@/api/loads-api.js'
import { ElMessage } from 'element-plus'
import { useAutoHeightMixin } from "@/mixins/AutoHeightMixin.js";

const { autoHeight,updateHeight } = useAutoHeightMixin()
const treeRef = ref(null)

const defaultProps = {
  id: 'seq',
  label: (v) => { return `${v['name']} ${v['description']}` },
  children: 'children'
}
let treeData = ref([{
  seq: -1,
  name: '',
  description: '遥测量',
  children: []
}])
onMounted(() => {
  fetchTmList({}, (response)=> {
    let resData = response.data.data.rows
    treeData.value[0].children = resData
  },(err) => {
    console.log("fetch tm list failed！", err)
  })
})

const handleWatch = () => {
  const currentUrl = window.location.href;
  let newUrl = currentUrl.replace('upair/index', 'satellite_loads')
  const seqs = treeRef.value.getCheckedKeys()
  if(seqs.length === 0) {
    ElMessage({
      message: '请选中至少一条遥测量',
      type: 'warning',
    })
  } else {
    if(seqs[0] === '') {
      seqs.splice(0, 1)
    }
    window.open(newUrl + '?seq=' + seqs.join(","), "_blank");
  }
}
</script>

<style lang="scss" >

.buttons {
  padding: 2em 0 10px 41px;
}
.custom-scrollbar {
  overflow-y: auto;
}
//.telemetry .tel-tree>.el-tree-node {
//  position: relative;
//  width: 100%;
//}
//.telemetry .tel-tree>.el-tree-node>.el-tree-node__content {
//  position: fixed;
//  padding: 5px 50px 5px 10px;
//  z-index: 1000;
//}
//.telemetry .tel-tree>.el-tree-node>.el-tree-node__children {
//  position: relative;
//  top: 28px
//}
</style>